<template>
    <div class="login">
        <div>登录</div>

        <el-form  class="demo-ruleForm" ref="loginRef" :model="loginFrom"  :rules="rules">
            <el-form-item label="用户名" prop="username" id="co">
                <el-input suffix-icon="el-icon-edit" v-model="loginFrom.username" clearable></el-input>
            </el-form-item>
            <!-- password -->
            <el-form-item label="密码" prop="password">
                <el-input placeholder="请输入密码" v-model="loginFrom.password" show-password></el-input>
                <!-- <el-input v-model="user.password" show-password></el-input> -->
                <!-- <el-input suffix-icon="el-icon-burger" v-model="loginFrom.password" clearable></el-input> -->
            </el-form-item>

            <el-form-item>
                <el-button @click="login" type="primary">登录</el-button>
                <el-button>重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { userlogin } from "../request/api";
export default {
    data() {
        return {
            loginFrom: {
                username: '',
                password: ''
            },
            // 验证规则对象
            rules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 2, max: 8, message: '长度在2到8个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 2, max: 8, message: '长度在6到16个字符', trigger: 'blur' }
                ],

            }
        }
    },

    methods: {
        login() {
            // console.log(this.loginFrom,'登录啦');
            //验证规则
            this.$refs.loginRef.validate((val) => {
                if (val) {
                    userlogin(this.loginFrom)
                        .then(res => {
                            console.log(res);
                            if (res.code == 200) {
                                this.$message.success(res.msg)

                                this.$store.dispatch('changeUserInfo', res.list)
                                //跳转到page里的index里
                                this.$router.push('/index')
                            } else {
                                this.$message.error(res.msg)
                            }
                        })

                }


            })


        }

    }
}

</script>

<style lang="less" scoped>
.login {
    width: 100vw;
    height: 100vh;
    // background-image: url('../assets/333.jpg') ;
    background-image: url('../assets/4.jpg');
 

    .demo-ruleForm {
        position: absolute;
        width: 400px;
        height: 290px;
        left: 50%;
        top: 50%;
        margin: -150px 0 0 -150px;
        background-image: url('../assets/4.jpg');
        padding-right: 20px;
        padding-top: 20px;
        border-radius: 6%;
      
    }

    .el-button {
        margin-left: 60px;
    }
    .el-form-item__label {
        color: #FFFF00;
    }
}
</style>